<template>
	<view class="container">
		<!-- 轮播图 -->
		<u-swiper :list="banners" :circular="true" height="150" previousMargin="30" nextMargin="30"></u-swiper>
		<!-- 广告 -->
		<!-- 导航 -->
		<u-gap height="10" bgColor="#eee"></u-gap>
		<view class="cu-list grid solids-bottom col-4 no-border">
			<view
				class="cu-item"
				v-for="(item, index) in categories"
				:key="index"
				:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
				@click="goCategorieslist"
				:data-mid="item.mid"
			>
				<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.count != 0">
						<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
					</view>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<!-- 消息 -->
		<u-gap height="10" bgColor="#eee"></u-gap>
		<view class="message_box">
			<swiper class="swiper" duration="1000" :autoplay="true" interval="4000" :vertical="true" :circular="true">
				<swiper-item class="swiper-list" v-for="(item, index) in messages" :key="index">
					<view class="message-title">{{ item.title }}</view>
					<view class="message-content">
						<span>{{ item.tag }}</span>
						{{ item.content }}
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 列表头 -->
		<u-gap height="10" bgColor="#eee"></u-gap>
		<KTitle title="热门视频" optionName="更多"></KTitle>
		<!-- 列表内容 -->
		<view class="skill-sequence-panel-content-wrapper">
			<!--左边虚化-->
			<view class="hide-content-box hide-content-box-left"></view>
			<!--右边虚化-->
			<view class="hide-content-box hide-content-box-right"></view>
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
					<view :class="'nav-li bg-index' + (index + 1)">
						<view class="nav-name">{{ item.name }}</view>
					</view>
					<view class="nav-content">{{ item.content }}</view>
					<view @click="goVideo" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即学习</view>
				</view>
			</scroll-view>
		</view>
		<KTitle title="开源项目" optionName="更多"></KTitle>
		<view class="cu-card case no-card">
			<KCardBase v-for="item in projects" :key="item.id" 
			:imageUrl="item.tImg"
			:tag="item.tabs" 
			:type="item.type" 
			:time="item.time"
			:title="item.title"
			:read="item.user.read"
			:like="item.user.like"
			:use="item.user.use"
			@tabClick="toDetail(item)"></KCardBase>
			</view>
	</view>
</template>

<script>
import KTitle from '@/components/K-Title.vue';
import KCardBase from '@/components/K-Card-Base.vue'
import data from '@/common/data.js'
export default {
	components: {
		KTitle,
		KCardBase
	},
	data() {
		return {
			//项目列表
			projects: data.projects,
			// 轮播图
			banners: [
				'http://172.16.1.181:8880/images/banners/banner1.png',
				'http://172.16.1.181:8880/images/banners/banner2.png',
				'http://172.16.1.181:8880/images/banners/banner3.png',
				'http://172.16.1.181:8880/images/banners/banner4.png'
			],
			// 导航分类
			categories: [
				{
					cuIcon: 'hotfill',
					color: 'red',
					badge: '优惠',
					mid: '1',
					name: '学习技术'
				},
				{
					cuIcon: 'colorlens',
					color: 'orange',
					badge: 1,
					mid: '2',
					name: '需求定制'
				},
				{
					cuIcon: 'goodsnewfill',
					color: 'yellow',
					badge: 12,
					mid: '3',
					name: '客户定制'
				},
				{
					cuIcon: 'calendar',
					color: 'cyan',
					badge: 122,
					mid: '4',
					name: '文章资讯'
				}
			],
			// 消息
			messages: [
				{
					title: '「前端铺子」感谢大家的支持',
					tag: '感谢',
					content: '加群请在git上查看二维码或联系方式'
				},
				{
					title: '组件持续更新中，敬请期待！',
					tag: '更新',
					content: '致力提供优质的组件，gitee保持最新'
				}
			],
			//
			curriculum: [
				{
					name: 'uniapp项目开发',
					content: 'uniapp小程序商城系统开发，实战项目...'
				},
				{
					name: '后台管理系统',
					content: 'vue+iview的后台管理系统建设系统开发...'
				},
				{
					name: 'App模板',
					content: '基于uniapp开发的效率类APP，开发至上线...'
				},
				{
					name: 'PC端官网开发',
					content: 'html/css/jQuery建设的PC端官方门户网站...'
				},
				{
					name: 'uniapp多端打包',
					content: 'uniapp开发完成上线的打包流程，上架商店等...'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		toDetail(item){
			console.log(item)
		}
	}
};
</script>

<style lang="scss">
.container {
	// 消息样式
	.message_box {
		width: 100%;
		height: 120rpx;
		background: url('http://172.16.1.181:8880/images/clock.gif') #fff;
		background-size: 100rpx 100rpx;
		background-repeat: no-repeat;
		background-position: 14rpx 10rpx;
		padding-left: 130rpx;
		.swiper {
			height: 120rpx;
			.swiper-list {
				.message-title {
					height: 65rpx;
					line-height: 70rpx;
					font-weight: 600;
					font-size: 28rpx;
				}
				.message-content {
					color: #0081ff;
					span {
						background-color: #0081ff;
						color: #ffffff;
						padding: 2rpx 8rpx;
						border-radius: 8rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
	// 热门视频
	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
		/*左右渐变遮罩*/
		.hide-content-box {
			position: absolute;
			top: 0;
			height: 100%;
			width: 10px;
			z-index: 2;
		}
		.hide-content-box-left {
			left: 0;
			background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
		}

		.hide-content-box-right {
			right: 0;
			background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
		}
		.kite-classify-scroll {
			width: 100%;
			height: 380rpx;
			overflow: hidden;
			white-space: nowrap;
			.kite-classify-cell {
				display: inline-block;
				width: 266rpx;
				height: 370rpx;
				margin-right: 20rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
				.nav-li {
					padding: 40rpx 30rpx;
					width: 100%;
					background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
					background-size: cover;
					background-position: center;
					position: relative;
					z-index: 1;
				}

				.nav-name {
					font-size: 28upx;
					text-transform: Capitalize;
					margin-top: 20upx;
					position: relative;
				}

				.nav-name::before {
					content: '';
					position: absolute;
					display: block;
					width: 40rpx;
					height: 6rpx;
					background: #fff;
					bottom: 0;
					right: 0;
					opacity: 0.5;
				}

				.nav-name::after {
					content: '';
					position: absolute;
					display: block;
					width: 100rpx;
					height: 1px;
					background: #fff;
					bottom: 0;
					right: 40rpx;
					opacity: 0.3;
				}

				.nav-content {
					width: 100%;
					padding: 15rpx;
					display: inline-block;
					overflow-wrap: break-word;
					white-space: normal;
				}

				.nav-btn {
					width: 200rpx;
					height: 60rpx;
					margin: 8rpx auto;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
				}

				.bg-index1 {
					background-color: #19cf8a;
					color: #fff;
				}

				.bg-index2 {
					background-color: #954ff6;
					color: #fff;
				}

				.bg-index3 {
					background-color: #5177ee;
					color: #fff;
				}

				.bg-index4 {
					background-color: #f49a02;
					color: #fff;
				}

				.bg-index5 {
					background-color: #ff4f94;
					color: #fff;
				}

				.bg-index6 {
					background-color: #7fd02b;
					color: #fff;
				}
			}
		}
	}
	
}
</style>
